<template>
  <div class="loading">
    <div v-if="type=='circleLoading'"  v-show='true'>
      <div><img src="./loadingimg.gif"></div>
    </div>
    <div v-if="type=='waveLoading'" class="loader">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div v-if="type=='triangleLoading'" class="triangle-wrapper">
      <div class="triangle triangle-1">
        <svg class="triangle-svg" viewBox="0 0 140 141">
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <polygon class="triangle-polygon"  points="70 6 136 138 4 138"></polygon>
          </g>
        </svg>
      </div>
      <div class="triangle triangle-2">
        <svg class="triangle-svg" viewBox="0 0 140 141">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <polygon class="triangle-polygon"  points="70 6 136 138 4 138"></polygon>
    </g>
  </svg>
      </div>
      <div class="triangle triangle-3">
        <svg class="triangle-svg" viewBox="0 0 140 141">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <polygon class="triangle-polygon"  points="70 6 136 138 4 138"></polygon>
    </g>
  </svg>
      </div>
      <div class="triangle triangle-4">
        <svg class="triangle-svg" viewBox="0 0 140 141">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <polygon class="triangle-polygon"  points="70 6 136 138 4 138"></polygon>
    </g>
  </svg>
      </div>
      <div class="triangle triangle-5">
        <svg class="triangle-svg" viewBox="0 0 140 141">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <polygon class="triangle-polygon"  points="70 6 136 138 4 138"></polygon>
    </g>
  </svg>
      </div>
      <p class="triangle-loading text-danger">Loading</p>

    </div>
  </div>
</template>

<script>

  import {mapActions, mapGetters} from 'Vuex'

  export default {
    computed: mapGetters([  //变量
      'active',
    ]),
    data() {
      return {
        loadingSvg: null
      }
    },
    props: {
      type: {
        type: String,
        default: 'triangleLoading'
      }
    },
    mounted() {
    },
    methods: {
    }
  }
</script>
<style scoped>
  .loading {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -74px;
    z-index: 9999999;
    background: rgba(0,0,0,.8);
    border-radius: 15px;
  }

  img {
    vertical-align: middle;
    opacity: 0.8;
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }

  .loader {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    width: 175px;
    height: 100px;
  }

  .loader span {
    display: block;
    background: #ccc;
    width: 7px;
    height: 10%;
    border-radius: 14px;
    margin-right: 5px;
    float: left;
    margin-top: 25%;
  }

  .loader span:last-child {
    margin-right: 0px;
  }

  .loader span:nth-child(1) {
    animation: load 2.5s 1.4s infinite linear;
  }

  .loader span:nth-child(2) {
    animation: load 2.5s 1.2s infinite linear;
  }

  .loader span:nth-child(3) {
    animation: load 2.5s 1s infinite linear;
  }

  .loader span:nth-child(4) {
    animation: load 2.5s 0.8s infinite linear;
  }

  .loader span:nth-child(5) {
    animation: load 2.5s 0.6s infinite linear;
  }

  .loader span:nth-child(6) {
    animation: load 2.5s 0.4s infinite linear;
  }

  .loader span:nth-child(7) {
    animation: load 2.5s 0.2s infinite linear;
  }

  .loader span:nth-child(8) {
    animation: load 2.5s 0s infinite linear;
  }

  .loader span:nth-child(9) {
    animation: load 2.5s 0.2s infinite linear;
  }

  .loader span:nth-child(10) {
    animation: load 2.5s 0.4s infinite linear;
  }

  .loader span:nth-child(11) {
    animation: load 2.5s 0.6s infinite linear;
  }

  .loader span:nth-child(12) {
    animation: load 2.5s 0.8s infinite linear;
  }

  .loader span:nth-child(13) {
    animation: load 2.5s 1s infinite linear;
  }

  .loader span:nth-child(14) {
    animation: load 2.5s 1.2s infinite linear;
  }

  .loader span:nth-child(15) {
    animation: load 2.5s 1.4s infinite linear;
  }

  @keyframes load {
    0% {
      background: red;
      margin-top: 25%;
      height: 10%;
    }
    50% {
      background: purple;
      height: 100%;
      margin-top: 0%;
    }
    100% {
      background: #ccc;
      height: 10%;
      margin-top: 25%;
    }
  }

  @keyframes grow-and-fade {

    0% {
      opacity: 0;
      transform: scale(0.1) translatez(0);
    }
    40% {
      opacity: 1;
    }
    60% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: scale(1) translatez(0);
    }
  }
  @keyframes pulsing-fade {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 0;
    }
    40% {

      opacity: 0.8;

    }

    60% {

      opacity: 0;

    }

  }

  .triangle {

    animation: grow-and-fade 2000ms linear infinite;

    height: 150px;

    left: 0;

    opacity: 0;

    width: 150px;

    position: absolute;

    top: 0%;

    transform: translatez(0);

    transform-origin: 50% 60%;

    will-change: opacity, transform;

  }

  .triangle-wrapper {
    height: 150px;
    position: relative;
    left:0;
    top:10%;
    width: 150px;
    margin: 0 auto;


  }

  .triangle-loading {

    animation: pulsing-fade 6000ms ease infinite;
    font-family: 'Helvetica Neue', Helvetica, sans-serif;

    font-size: 12px;

    font-weight: 300;

    left: 50%;

    letter-spacing: 8px;

    margin-left: 4px;

    margin-top: 10px;

    opacity: 0;

    position: absolute;

    top: 100%;

    transform: translate3d(-50%, -50%, 0);

    text-transform: uppercase;

  }

  .triangle-svg {

    margin-top: -20px;

    opacity: 0.5;

    overflow: visible;

  }

  .triangle-polygon {

    stroke-width: 5px;

  }

  .triangle-1 {

    animation-delay: 0ms;

  }

  .triangle-1 .triangle-polygon {

    stroke: hotpink;

  }

  .triangle-2 {

    animation-delay: 400ms;

  }

  .triangle-2 .triangle-polygon {

    stroke: aqua;

  }

  .triangle-3 {

    animation-delay: 800ms;

  }

  .triangle-3 .triangle-polygon {

    stroke: cornflowerblue;

  }

  .triangle-4 {

    animation-delay: 1200ms;

  }

  .triangle-4 .triangle-polygon {

    stroke: yellow;

  }

  .triangle-5 {

    animation-delay: 1600ms;

  }

  .triangle-5 .triangle-polygon {

    stroke: white;

  }

</style>
